<div class="fund-content">

    <div class="fund-type" style="display: none;" v-show="assetStrategList">
        <div class="radio">
            <label>
                <input type="radio" name="assetStrategyId" value="0" checked>
                所有
            </label>
        </div>
        <template v-for="assetStrategy in assetStrategList">
            <div class="radio">
                <label>
                    <input type="radio" name="assetStrategyId" value="{{assetStrategy.assetStrategyId}}">
                    {{assetStrategy.assetStrategName}}
                </label>
            </div>
        </template>
        <div class="fund-search">
            <div class="radio">
                <label>
                    <input type="radio" id="showAllFund">
                    ALL
                </label>
            </div>
            <input type="text" placeholder="请输入要查询的基金名称" id="fundInput"/>
            <button id="fundBtn">搜索</button>
        </div>
    </div>

    <div class="table-responsive clear" style="display: none;" v-show="showTable">
        <table class="table table-bordered table-hover vam">
            <thead>
            <tr>
                <th>选择</th>
                <th class="sort" data-sortName="fund_type_target">资产类别</th>
                <th class="sort" data-sortName="fund_ext_code">基金ID</th>
                <th class="sort" data-sortName="fund_name_short">待选基金</th>
                <th style="width: 60px;" class="sort" data-sortName="fund_management_company">管理人</th>
                <th style="width: 92px;" class="sort" data-sortName="fund_fundation_date">成立日期</th>
                <th style="width: 92px;" class="sort" data-sortName="lastUpdateDate">净值日期</th>
                <th style="width: 48px;" class="sort" data-sortName="unitNav">单位净值</th>
                <th style="width: 48px;" class="sort" data-sortName="accumulateNav">累计净值</th>
                <th style="width: 48px;" class="sort" data-sortName="yieldAnnually">年化收益率</th>
                <th style="width: 48px;" class="sort" data-sortName="drawdown">最大回撤</th>
                <th style="width: 48px;" class="sort" data-sortName="volatilityAnnually">年化波动率</th>
                <th style="width: 80px;" class="sort" data-sortName="sharpRatio">夏普比率</th>
                <th style="width: 75px;" class="sort" data-sortName="fund_type_strategy">策略类型</th>
                <th style="width: 48px;" class="sort" data-sortName="yield1y">近一年收益率</th>
                <th style="width: 65px;">走势图</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td colspan="16" style="text-align: center;" v-on:click="showSelected();">
                    <button>{{currentTitle}}</button>
                </td>
            </tr>
            <tr style="display: none;background-color: #ccc;" v-show="userSelected" v-for="fund in selectedFundList"
                class="selected"
                data-fundExtCode="{{fund.fundExtCode}}">
                <td class="check"><input type="checkbox" checked data-fundExtCode="{{fund.fundExtCode}}"></td>
                <td>{{fund.fundTypeTarget}}</td>
                <td>{{fund.fundExtCode}}</td>
                <td>{{fund.fundNameShort}}</td>
                <td>{{fund.fundManager | manager}}</td>
                <td>{{fund.fundFundationDate | fundDate}}</td>
                <td>{{fund.lastUpdateDate | fundDate}}</td>
                <td>{{fund.unitNav | length 6}}</td>
                <td>{{fund.accumulateNav | length 6}}</td>
                <td>{{fund.yieldAnnually | number 100}}%</td>
                <td>{{fund.drawdown | number 100}}%</td>
                <td>{{fund.volatilityAnnually | number 100}}%</td>
                <td>{{fund.sharpRatio | number}}</td>
                <td>{{fund.fundTypeStrategy}}</td>
                <td>{{fund.yield1y | number 100}}%</td>
                <td style="text-align: center;"><a class="fundTrend" href="javascript:;" v-on:click="fundTrend(fund);">查看</a>
                </td>
            </tr>
            <tr v-for="fund in fundList" class="choice" :class="{'fund-disabled': fund.filterStatus == 0}"
                data-fundExtCode="{{fund.fundExtCode}}">
                <td class="check">
                    <input type="checkbox" data-fundExtCode="{{fund.fundExtCode}}"
                           v-bind="{disabled:(fund.filterStatus == 0 ? true : false)}">
                </td>
                <td>{{fund.fundTypeTarget}}</td>
                <td>{{fund.fundExtCode}}</td>
                <td>{{fund.fundNameShort}}</td>
                <td>{{fund.fundManager | manager}}</td>
                <td>{{fund.fundFundationDate | fundDate}}</td>
                <td>{{fund.lastUpdateDate | fundDate}}</td>
                <td>{{fund.unitNav| length 6 }}</td>
                <td>{{fund.accumulateNav | length 6}}</td>
                <td>{{fund.yieldAnnually | number 100}}%</td>
                <td>{{fund.drawdown | number 100}}%</td>
                <td>{{fund.volatilityAnnually | number 100}}%</td>
                <td>{{fund.sharpRatio | number}}</td>
                <td>{{fund.fundTypeStrategy}}</td>
                <td>{{fund.yield1y | number 100}}%</td>
                <td style="text-align: center;"><a class="fundTrend" href="javascript:;" v-on:click="fundTrend(fund);">查看</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: center;">
        <ul id="fundPage" class="pagination"></ul>
    </div>
</div>
<p class="next">
    <button type="button" class="btn btn-primary" v-on:click="next();">下一步</button>
</p>